<template>
	<view class="bg_hui">
		<view class="top">
			<view class="item">
				<view class="con">
					<view class="pic">
						<image v-if="info.logo" :src="info.logo" mode="widthFix"></image>
						<image v-else src="http://bylm.zxinvest.cn/storage/uploads/202406/17177268738347.jpg"
							mode="widthFix"></image>
					</view>
					<view class="text">
						<text class="h4">{{info.name}}</text>
						<text class="p">商户号：{{info.merchantno}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="info">
			<view class="con">
				<view class="index_title">
					<image src="../../static/images/index_i7.png" mode="widthFix"></image>
					<text>商户简介</text>
					<image src="../../static/images/index_i8.png" mode="widthFix"></image>
				</view>
				<view class="mass">
					<text class="p">{{info.intro}}</text>
					<view class="pic">
						<view class="item" v-for="(item,i) in piclist" :key="i">
							<view class="pic2" :style="{backgroundImage: 'url('+ item.url +')'}"
								@click="LookPic(i)">
								<!-- <image :src="item.url" mode="widthFix"></image> -->
							</view>
						</view>
					</view>

					<view class="icon_list">
						<view class="li" v-if="info.address">
							<view class="icon">
								<image src="../../static/images/i1.png" mode="widthFix"></image>
							</view>
							<text>商户地址：</text>{{info.address}}
						</view>
						<!-- <view class="li">
							<view class="icon">
								<image src="../../static/images/i2.png" mode="widthFix"></image>
							</view>
							<text>营业时间：</text>{{info.business_hours}}
						</view> -->
						<view class="li">
							<view class="icon">
								<image src="../../static/images/i3.png" mode="widthFix"></image>
							</view>
							<text>商家电话：</text>{{info.tel}}
						</view>
					</view>
					<!-- <navigator url="/pages/index/shopserve" hover-class="none">
						<view class="link">进入服务</view>
					</navigator> -->
					<navigator :url="'/pages/login/one?shopno=' + info.merchantno" hover-class="none" v-if="islogin==0">
						<view class="link">加入会员</view>
					</navigator>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: [],
				islogin: 0,
				piclist: [],
				urls:[],
			}
		},
		onLoad(e) {
			let that = this;
			if (that.common.GetStorage('byh5token')) {
				that.islogin = 1;
			}
			that.GetInfo(e.id);
		},
		methods: {

			LookPic: function(index) {
				let that = this;
				uni.previewImage({
					urls: that.urls,
					current:index
				});
			},

			GetInfo: function(id) {
				let that = this;
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				that.common.http('GET', 'merchant/' + id, '', function(res) {
					uni.hideLoading();
					console.log(res.data)
					that.info = res.data.merchant;


					try {
						JSON.parse(res.data.merchant.image);
						that.piclist = JSON.parse(res.data.merchant.image);
						
						
						that.urls = that.piclist.map(item => item.url);
						
						console.log(urls)
						
					} catch (e) {}
				});
			},
		}
	}
</script>

<style scoped>
	.top {
		background: linear-gradient(to bottom, #4f8ced, #f7f7f7);
		padding: 20rpx;
		padding-top: 16rpx;
	}

	.top .item {
		background-color: #fff;
		padding: 40rpx 32rpx;
		border-radius: 8px;
	}

	.top .con {
		padding-left: 90rpx;
		height: 90rpx;
		padding-right: 138rpx;
		position: relative;
	}

	.top .con .pic {
		position: absolute;
		left: 0;
		top: 0;
		width: 90rpx;
		height: 90rpx;
	}

	.top .con .pic image {
		width: 100%;
		height: auto;
	}

	.top .text {
		padding: 2rpx 0;
		padding-left: 20rpx;
		height: 90rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.top .text .h4 {
		display: block;
		font-size: 34rpx;
		color: #333;
	}

	.top .text .p {
		font-size: 26rpx;
		color: #666;
		display: block;
	}

	.info {
		padding: 20rpx 20rpx;
	}

	.info .con {
		background-color: #fff;
		border-radius: 8px;
		padding: 42rpx 20rpx;
	}

	.index_title {
		margin-top: 0;
	}

	.mass {
		margin-top: 12px;
	}

	.mass .p {
		font-size: 24rpx;
		color: #666;
		line-height: 1.8;
	}

	.mass .pic {
		overflow: hidden;
		margin-left: -20rpx;
	}

	.mass .pic .item {
		width: 33.3333%;
		float: left;
		padding-left: 20rpx;
		margin-top: 20rpx;
	}

	.mass .pic .item .pic2 {
		background-color: rgba(0, 0, 0, 0.6);
		width: 100%;
		padding-top: 100%;
		background-size: contain;
		background-position: center;
		background-repeat: no-repeat;
	}

	.mass .pic .item image {
		width: 100%;
		height: auto;
		vertical-align: middle;
	}

	.icon_list {
		margin-top: 40rpx;
	}

	.icon_list .li {
		position: relative;
		padding-left: 54rpx;
		font-size: 28rpx;
		color: #666;
		margin: 20rpx 0;
	}

	.icon_list .li text {
		color: #333;
	}

	.icon_list .li .icon {
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	.icon_list .li image {
		width: 34rpx;
		vertical-align: middle;
	}

	.link {
		width: 90%;
		margin-left: 5%;
		text-align: center;
		border: 1px solid #2571eb;
		height: 88rpx;
		line-height: 84rpx;
		border-radius: 50px;
		margin-top: 40rpx;
		font-size: 28rpx;
		color: #2571eb;
	}
</style>